<template>
  <div class="goods-item" @click="itemClick">
    <img :src="good.show.img">
    <div class="goods-info">
      <p>{{good.title}}</p>
      <div class="goods-info-other">
        <span class="price">{{good.price}}</span>
        <img :src="require('@/assets/img/common/collect.svg')">
        <span class="collect">{{good.cfav}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    props: {
      good: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      itemClick() {
        this.$router.push(`/detail/${this.good.iid}`);
      }
    }
  }
</script>

<style scoped>
  .goods-item {
    width: 48%;
    margin-bottom: 10px;
  }

  .goods-item img {
    width: 100%;
    border-radius: 5px;
  }

  .goods-info {
    font-size: 12px;
  }

  .goods-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
    margin-top: 3px;
  }

  .goods-info-other {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  .goods-info-other img {
    width: 10px;
  }

  .goods-info .price {
    color: var(--color-high-text);
    margin-right: 10px;
  }

  .goods-info .collect {
    margin-left: 3px;
  }


</style>
